<template>
  <div id="userLogin">
    <a-form
      :model="form"
      style="width: 400px; margin-top: 100px; text-align: center"
      @submit="handleSubmit"
    >
      <h2 style="margin-bottom: 30px">用户登录</h2>
      <a-form-item field="userName" label="用户名">
        <a-input v-model="form.userAccount" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item field="password" label="密码">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item field="password">
        <router-link
          to="/user/register"
          style="text-decoration: none; color: #444"
          >无账号去注册
        </router-link>
      </a-form-item>
      <a-form-item>
        <a-button style="width: 200px" type="primary" html-type="submit"
          >登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<!--<script lang="ts">-->
<!--import { reactive } from "vue";-->
<!--import { UserLoginRequest } from "../../generated";-->
<!--import { UserService } from "../../generated/services/UserService";-->

<!--export default {-->
<!--  setup() {-->
<!--    const form = reactive({-->
<!--      userAccount: "",-->
<!--      userPassword: "",-->
<!--    });-->
<!--    const handleSubmit = (data: UserLoginRequest) => {-->
<!--      const res = UserService.userLoginUsingPost(form);-->
<!--    };-->
<!--    return {-->
<!--      form,-->
<!--      handleSubmit,-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->
<script setup lang="ts">
import { reactive } from "vue";
import { UserLoginRequest } from "../../../generated";
import { UserControllerService } from "../../../generated/services/UserControllerService";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";

const router = useRouter();

const form = reactive({ userAccount: "", userPassword: "" });
const handleSubmit = async (data: UserLoginRequest) => {
  const res = await UserControllerService.userLoginUsingPost(form);
  if (res.code === 0) {
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    Message.error("账号或密码有误");
  }
};
</script>

<style>
#userLogin {
  height: 85vh;
  display: flex;
  justify-content: center;
}
</style>
